<template>
  <div class="details-catalog" ref="detailsCatalogRef">
    <el-card class="box-card catalogue">
      <slot></slot>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <el-icon :size="20" style="transform: translateY(4px)">
          <Watch />
        </el-icon>
        <span> 最新文章</span>
      </template>
      <div class="item" v-for="item in newsArtcile" :key="item._id" @click="handleDeatlis(item)">
        <el-image :src="store.state.BaseUrl + item.bg" style="width: 80px; height: 58px" fit="cover" />
        <div class="info">
          <div class="title">{{ item.title }}</div>
          <div class="createTime">
            {{ dayjs(Number(item.createTime)).format('YYYY/MM/DD') }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, inject } from 'vue'
import dayjs from 'dayjs'
import { Watch } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const detailsCatalogRef = ref<HTMLDivElement>()
// 全局状态
const store: any = inject('store')
const position = () => {
  if (!detailsCatalogRef.value) return

  const bodyScrollTop: number =
    document.documentElement.scrollTop || document.body.scrollTop

  const infoList: HTMLDivElement | null = document.querySelector('.infoList')

  infoList &&
    (detailsCatalogRef.value.style.position =
      bodyScrollTop > infoList.offsetTop - 20 ? 'fixed' : 'static')
}
// 文章数据
type detailData = {
  _id: string
  title: string
  info: string
  articleType: string
  bg: string
  createTime: string
}
defineProps<{
  newsArtcile: detailData[]
}>()

onMounted(() => {
  window.addEventListener('scroll', position, {
    passive: true,
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', position)
})

// 跳转到详情页
const route = useRoute()
const router = useRouter()
const emits = defineEmits(['updateDetail'])
function handleDeatlis(item: detailData) {
  if (item._id === route.query.id) return
  router.replace(`/details?id=${item._id}`)
  emits('updateDetail', item)
}
</script>
<style lang="scss" scoped>
.details-catalog {
  position: static;
  top: 20px;
  z-index: 3;

  :deep(.el-card__header) {
    padding: 10px 20px;
  }

  .catalogue {
    :deep(.el-card__body) {
      padding-top: 10px;
    }
  }

  :deep(.u-divider) {
    margin: 10px 0 !important;
  }

  .item {
    display: flex;
    width: 100%;
    margin: 10px 0;
    padding: 0 0 5px;
    border-bottom: 1px dashed #ddd;
    cursor: pointer;

    &:hover .title {
      color: #23d5ab;
    }

    .info {
      width: 140px;
      margin-left: 10px;
      font-size: 12px;

      .title {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .createTime {
        color: #888;
      }
    }
  }
}

.box-card {
  width: 280px;
  border-radius: 10px;
  max-height: 320px;
  overflow: auto;
  margin-bottom: 20px;

  /* 滚动槽 */
  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(45deg,
        hsla(0, 0%, 100%, 0.4) 25%,
        transparent 0,
        transparent 50%,
        hsla(0, 0%, 100%, 0.4) 0,
        hsla(0, 0%, 100%, 0.4) 75%,
        transparent 0,
        transparent);
    border-radius: 2em;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  :deep(li) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
